<!--
 * @Author: liyin 2179253556@qq.com
 * @Date: 2023-02-08 16:04:18
 * @LastEditors: liyin 2179253556@qq.com
 * @LastEditTime: 2023-03-01 16:42:07
 * @FilePath: \test\src\views\HomeView.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div class="data-flex-box">
        <Title title="今日数据统计" none style="padding-left:0px;"></Title>
        <Card :border="5">
            <van-row :gutter="15">
                <van-col :span="6" v-for="(item, index) in dateList" :key="index">
                    <Button @click="checkDateBtn(index)" size="mini" style="width:100%;border-radius: 2px;" row
                        :type="dateIndex == index ? 'primary' : 'default'">{{ item
                        }}</Button>
                </van-col>
            </van-row>
        </Card>
        <Card :border="5" style="margin-bottom:15px;">
            <van-row :gutter="15" style="margin-bottom:10px;">
                <van-col :span="6" v-for="(item, index) in tabList" :key="index" @click="checkTabBtn(index)">
                    <div class="common-column-box" :class="tabIndex == index ? 'common-active-box' : ''">
                        <div>{{ index + 1 }}</div>
                        <div>{{ item }}</div>
                    </div>
                </van-col>
            </van-row>
            <!-- Table数据 -->
            <Table :studentsList="studentsList" :options="options"></Table>
            <div class="btn-flex-box">
                <Button block round style="margin-bottom:0px;" color="#3D7FFF">一键导出</Button>
            </div>
        </Card>
        <Title title="班级统计" none style="padding-left:0px;"></Title>
        <Card :border="5" :padbottom="0">
            <van-row :gutter="15">
                <van-col :span="6" v-for="(item, index) in dateList" :key="index">
                    <Button @click="checkDateBtn(index)" size="mini" style="width:100%;border-radius: 2px;" row
                        :type="dateIndex == index ? 'primary' : 'default'">{{ item
                        }}</Button>
                </van-col>
            </van-row>
            <div class="select-content-box">
                <ChangeSelect :firstName="facultyName" :secondName="gradeName" :thirdName="className"
                    :firstShow="facultyShow" :secondShow="gradeShow" :thirdShow="classShow" @handleFirst="handleFaculty"
                    @handleSecond="handleGrade" @handleThird="handleClass"></ChangeSelect>
            </div>
        </Card>
        <!-- 选择学部 -->
        <van-action-sheet v-model:show="facultyShow" teleport="#app" :actions="facultyActions" @select="selectFaculty"
            cancel-text="取消" description="请选择学部" close-on-click-action />
        <!-- 选择年级 -->
        <van-action-sheet v-model:show="gradeShow" teleport="#app" :actions="gradeActions" @select="selectGrade"
            cancel-text="取消" description="请选择年级" close-on-click-action />
        <!-- 选择班级 -->
        <van-action-sheet v-model:show="classShow" teleport="#app" :actions="classActions" @select="selectClass"
            cancel-text="取消" description="请选择班级" close-on-click-action />

        <Card :border="5" v-for="(item, index) in 8" :key="index">
            <van-cell is-link>
                <template #title>
                    <span class="custom-title">2020级</span>
                </template>
            </van-cell>
            <Card bgColor="#F9F9F9" :border="5" style="padding:10px 15px;">
                <van-row>
                    <van-col :span="8">
                        扣分
                        <span style="font-family:Bold;color:#FF5B44;margin-left:5px;">-4</span>
                    </van-col>
                    <van-col>
                        加分
                        <span style="font-family:Bold;color:#20B385;margin-left:5px;">+3</span>
                    </van-col>
                </van-row>
            </Card>
            <van-row :gutter="15">
                <van-col :span="6" v-for="(item, index) in tabList" :key="index">
                    <div class="row-padding-box">
                        <div>{{ item }}</div>
                        <div>{{ index + 1 }}</div>
                    </div>
                </van-col>
            </van-row>
        </Card>
    </div>
</template>
<script lang="ts" setup>
import { Toast } from 'vant'
import { ref, reactive, onMounted, nextTick, onUnmounted } from 'vue'
import $util from '../util/util'
import { useStore } from 'vuex'
import { useRoute, useRouter } from 'vue-router'
const store = useStore()
const dateList = ref(['今天', '本周', '本月', '本学期'])
const dateIndex = ref(1)
const checkDateBtn = (val: number) => {
    dateIndex.value = val
}
const tabList = ref(['预警', '通报', '停宿', '退宿'])
const tabIndex = ref(1)
const checkTabBtn = (val: number) => {
    tabIndex.value = val
}
const facultyName = ref('选择学部')
const gradeName = ref('选择年级')
const className = ref('选择班级')
const facultyShow = ref(false)
const gradeShow = ref(false)
const classShow = ref(false)
const facultyActions = ref([{ name: "选项一" }, { name: "选项二" }, { name: "选项三" }])
const gradeActions = ref([{ name: "选项三" }, { name: "选项四" }, { name: "选项五" }])
const classActions = ref([{ name: "选项六" }, { name: "选项七" }, { name: "选项八" }])
const handleFaculty = () => {
    facultyShow.value = true
}
const selectFaculty = (item: any) => {
    facultyShow.value = false
    facultyName.value = item.name
}
const handleGrade = () => {
    if (facultyName.value === '选择学部') {
        return Toast('请先选择学部')
    }
    gradeShow.value = true
}
const selectGrade = (item: any) => {
    gradeShow.value = false
    gradeName.value = item.name
}
const handleClass = () => {
    if (gradeName.value === '选择年级') {
        return Toast('请先选择年级')
    }
    classShow.value = true
}
const selectClass = (item: any) => {
    classShow.value = false
    className.value = item.name
}
// table数据
const studentsList = ref<any>([
    {
        user_name: '周国辉',
        class_name: '初中部-2020级(01)班',
    },
    {
        user_name: '周国辉2',
        class_name: '初中部-2020级(01)班',
    },
    {
        user_name: '周国辉3',
        class_name: '初中部-2020级(01)班',
    },
    {
        user_name: '周国辉4',
        class_name: '初中部-2020级(01)班',
    }
])
const options = ref<any>([
    { name: 'checkbox', flex: 4, faild: '', color: '', },
    { name: '姓名', flex: 6, faild: 'user_name', color: '#649FFF', },
    { name: '班级', flex: 14, faild: 'class_name', color: '', }
])
onMounted(async () => {
})
</script>
<style lang="scss" scoped>
.data-flex-box {
    position: relative;
    padding: 15px;

    .row-padding-box {
        text-align: center;
        justify-content: center;
        padding: 10px 0 0 0;
        color: #666666;
        margin-top: 5px;

        div:first-of-type {
            margin-bottom: 10px;
            color: #999999;
        }

        div:last-of-type {
            color: #333333;
        }
    }

    .common-column-box {
        border-radius: 5px;
        text-align: center;
        background-color: #F9F9F9;
        justify-content: center;
        padding: 10px 0;

        div:first-of-type {
            margin-bottom: 2px;
            color: #666666;
            font-size: 20px;
            font-family: Arial;
            font-weight: bold;
        }

        div:last-of-type {
            color: #999999;
        }
    }

    .common-active-box {
        background-color: #F2F6FF;

        div:last-of-type {
            color: #3D7FFF;
        }

        div:first-of-type {
            color: #3D7FFF;
        }
    }

    .btn-flex-box {
        margin: 15px 15% 0 15%;
    }

    .select-content-box {
        margin-top: 15px;
        border-top: 1px solid #F9F9F9;
        padding-top: 10px;
    }
}

:deep(.van-cell) {
    padding: 0px;
}

:deep(.van-cell:after) {
    display: none;
}</style>
  